组件和props

组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

react中的组件就像是一个函数，他可以接收一个props对象，并返回一个React元素

函数定义/类定义组件

函数定义组件

function welcome(props) {  return 
    
     hello {props.name}
    
;}

该函数返回一个react组件，它接收一个对象props，并返回一个React元素，我们将这种类型的组件成为是函数定义组件，是因为字面上看来，他就是一个javascript函数。

类组件定义

class welcome extends React.Component{  render() {    return 
    
     hello {this.props.name}
    
;  }}

使用 ES6 class 来定义一个组件:

上面两种方法定义的组件是相同的。

组件渲染

我们之前遇到的react元素都是dom标签。然而react元素也可以是自定义的组件：

const element = 
    ;

当时一个自定义组件的时候，它会将jsx属性转换为一个props对象传递给该组件。

function Welcome (props) {  return hi, {props.name}
;}const element = 
    
     ReactDOM.render(  element,  document.getElementById('app'));

回顾一下上段代码发生了什么

1. 我们对
    元素调用了ReactDOM.render()方法。2. React将{name: 'Sara'}作为props传入并调用Welcome组件。3. Welcome组件将Hello, Sara
元素作为结果返回。4. React DOM将DOM更新为Hello, Sara
。

注意：组件名称必须以大写字母开头。

组合组件

  
      
      
      Document

注意：组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

提取组件

// 一个Comment组件：（头像、名字、评论内容、时间）    function Comment (props) {      return (        
              
                 
                  
      
                     {props.author.name}            
      
          
     
          
     
      {props.text}
     
          
     
      {formatDate(props.date)}
     
        
    
      )    }    function formatDate(date) {      return date.toLocaleDateString();    }    const comment = {      date: new Date(),      text: 'I hope you enjoy learning React!',      author: {        name: 'Hello Kitty',        avatorurl: 'http://placekitten.com/g/64/64'      }    };    ReactDOM.render(      
    ,      document.getElementById('app')    );

这个组件由于嵌套，变得难以被修改，可复用的部分也难以被复用。所以让我们从这个组件中提取出一些小组件。

Avator组件

function Avatar(props) {  return (      );}

这样就成了

function Comment(props) {  return (    
          
             
        //这里使用提取出来的组件        
      
                 {props.author.name}        
      
      
     
      
     
              {props.text}      
     
      
     
              {formatDate(props.date)}      
     
    
    
  );}

我们还可以继续提取

function UserInfo(props) {  return (    
          
           
     
              {props.user.name}      
     
    
    
  );}

这样我们的组件就是

function Comment(props) {  return (    
          
           
     
              {props.text}      
     
      
     
              {formatDate(props.date)}      
     
    
    
  );}

props的可读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。props只是可读的。

function withdraw(account, amount) {  account.total -= amount;}// 不允许props被这种方式再组件中修改

转载地址：http://ycwel.baihongyu.com/

你可能感兴趣的文章